<template>
  <div ref="chainMapChartRef" style="width: 100%; height: 500px" />
</template>

<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { delay, useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
// 引入中国地图数据
// import "echarts/map/js/china.js";
import chian from "@/assets/map/chian.json";
import * as my_echarts from "echarts";
import { yiqingData } from "@/assets/map/yiqingData.js";

const { isDark } = useDark();
const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const data_list = [];
const data_value_list = [];
// 疫情相关数据
console.log(yiqingData);

for (let i = 0; i < yiqingData.length; i++) {
  data_list.push({
    name: yiqingData[i].name,
    value: yiqingData[i].econNum
  });
  data_value_list.push(yiqingData[i].econNum);
}

console.log(data_value_list, "最终的疫情数据展示====");

// =================地图相关配置==============================================
const chainMapChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(chainMapChartRef as Ref<HTMLDivElement>, {
  theme
});

// @ts-ignore
my_echarts.registerMap("中国", chian);

setOptions({
  layoutCenter: ["50%", "75%"], //位置
  layoutSize: "85%", //大小
  title: {
    text: "国内疫情数据",
    subtext: `数据源：新浪数据 更新时间: 2022-12-28 (目前已经停止更新)`
  },
  tooltip: {
    trigger: "item",
    formatter: params => {
      let num;
      let showHtml = "";
      if (isNaN(params.value)) {
        num = "0";
      } else {
        num = params.value;
      }
      showHtml += `
                        <span style="display: flex;">
                            ${"省份"}：${params.name}</br>
                            ${"人数"}：${num}
                        </span>
                    `;
      return showHtml;
    }
  },

  dataRange: {
    x: "left",
    y: "bottom",
    min: 0,
    max: 5000,
    text: ["高", "低"], // 文本，默认为数值文本
    calculable: true,
    inRange: {
      color: ["#d1e7fe", "red"]
    }
  },
  series: [
    {
      name: "数据",
      type: "map",
      map: "中国",
      roam: true,
      zoom: 1.7,
      selectedMode: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            textStyle: {
              color: "black"
            }
          }
        },
        emphasis: {
          areaColor: "#95ec69",
          label: {
            show: true
          }
        }
      },
      data: data_list
    }
  ]
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
    console.log("==================================");
  }
);
</script>
